<!DOCTYPE html><html lang="zh-CN"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五神鸟科技互动体验中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&amp;display=swap" rel="stylesheet">
    <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

        :root {
            --deep-space: #0a1a35;
            --gold-accent: #d4af37;
            --dark-mask: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%);
            --dark-mask-bottom: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: var(--deep-space);
            font-family: 'Noto Sans SC', sans-serif;
            color: white;
            overflow-x: hidden;
        }

        .calligraphy-font {
            font-family: 'Ma Shan Zheng', cursive;
            letter-spacing: 3px;
        }

        /* 顶部导航 */
        .nav-bar {
            height: 80px;
            width: 100%;
            position: fixed;
            top: 0;
            z-index: 999;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            padding: 0 30px;
        }

        /* .logo-container {
            width: 60px;
            height: 60px;
            background: var(--gold-accent);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        } */

        .nav-link {
            font-size: 16px;
            letter-spacing: 1px;
            transition: color 0.3s;
        }

        .nav-link.active {
            color: var(--gold-accent);
            position: relative;
        }

        .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 8px;
            height: 3px;
            background-color: var(--gold-accent);
        }

        .lang-switch {
            border: 1px solid var(--gold-accent);
            border-radius: 20px;
            padding: 6px 15px;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s;
        }

        .lang-switch:hover {
            background: rgba(212, 175, 55, 0.2);
        }

        /* 神鸟区 */
        .hero-section {
            height: 700px;
            width: 100%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            text-align: center;
            margin-top: 80px;
            overflow: hidden;
        }

        .hero-title {
            font-family: 'ZCOOL XiaoWei', 'Ma Shan Zheng', serif;
            font-size: 80px;
            color: var(--gold-accent);
            margin-bottom: 20px;
            z-index: 10;
        }

        .hero-subtitle {
            font-size: 32px;
            z-index: 10;
            margin-bottom: 30px;
        }

        .hero-description {
            font-size: 20px;
            max-width: 600px;
            opacity: 0.8;
            z-index: 10;
            margin-bottom: 150px;
        }

        /* 功能卡片区 */
        .features-section {
            width: 1200px;
            margin: 80px auto;
            display: grid;
            grid-template-columns: repeat(2, 550px);
            gap: 40px;
        }

        .feature-card {
            min-height: 280px;
            border-radius: 15px;
            padding: 30px;
            background: linear-gradient(145deg, rgba(10, 26, 53, 0.8), rgba(5, 15, 35, 0.9));
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease-out;
            z-index: 1;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at center, rgba(212, 175, 55, 0), rgba(212, 175, 55, 0.1));
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(212, 175, 55, 0.2);
        }

        .feature-card:hover::before {
            opacity: 1;
        }

        .feature-icon {
            display: block;
            margin: 0 auto;
            margin-bottom: 15px;
            transition: transform 0.8s ease-in-out;
        }

        .feature-card:hover .feature-icon {
            animation: float 0.8s ease-in-out infinite;
        }

        .feature-title {
            font-size: 24px;
            color: var(--gold-accent);
            text-align: center;
            margin-bottom: 15px;
        }

        .feature-desc {
            font-size: 16px;
            opacity: 0.8;
            text-align: center;
            margin-bottom: 25px;
            line-height: 1.6;
        }

        .feature-btn {
            width: 160px;
            height: 45px;
            background: linear-gradient(90deg, #d4af37 0%, #f9f293 100%);
            border: none;
            border-radius: 8px;
            color: white;
            font-weight: bold;
            font-size: 14px;
            cursor: pointer;
            display: block;
            margin: 0 auto;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .feature-btn:hover {
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
        }

        .feature-btn:active {
            transform: scale(0.95);
        }

        /* 技术说明区 */
        .tech-section {
            width: 100%;
            background: #050a12;
            padding: 80px 0;
        }

        .tech-section-title {
            font-size: 36px;
            color: var(--gold-accent);
            text-align: center;
            margin-bottom: 50px;
        }

        .tech-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            gap: 40px;
        }

        .tech-card {
            width: 450px;
            background: rgba(15, 30, 60, 0.7);
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(212, 175, 55, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .tech-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 25px rgba(212, 175, 55, 0.2);
        }

        .tech-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .tech-icon {
            width: 40px;
            height: 40px;
            margin-right: 15px;
            color: var(--gold-accent);
        }

        .tech-title {
            font-size: 24px;
            color: var(--gold-accent);
            font-weight: bold;
        }

        .tech-image {
            width: 100%;
            height: 200px;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 20px;
            background-position: center;
            background-size: cover;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        .tech-desc {
            font-size: 16px;
            line-height: 1.6;
            color: #fff;
            opacity: 0.9;
        }

        @media (max-width: 1200px) {
            .tech-container {
                max-width: 90%;
                flex-direction: column;
                align-items: center;
            }
            
            .tech-card {
                width: 100%;
                max-width: 500px;
                margin-bottom: 30px;
            }
        }

        /* 页脚 */
        .footer {
            height: 180px;
            width: 100%;
            background: #000;
            padding: 30px;
            position: relative;
        }

        .footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, rgba(212, 175, 55, 0) 0%, rgba(212, 175, 55, 0.3) 50%, rgba(212, 175, 55, 0) 100%);
        }

        .social-icon {
            width: 24px;
            height: 24px;
            margin: 0 10px;
            color: var(--gold-accent);
            transition: transform 0.3s;
        }

        .social-icon:hover {
            transform: translateY(-5px);
        }

        .footer-nav a {
            color: white;
            font-size: 14px;
            margin: 0 15px;
            transition: color 0.3s;
        }

        .footer-nav a:hover {
            color: var(--gold-accent);
        }

        .copyright {
            font-size: 14px;
            opacity: 0.8;
            margin-top: 10px;
        }

        /* 动画 */
        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }

        /* 粒子背景 */
        .particle-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }

        .particle {
            position: absolute;
            background-color: var(--gold-accent);
            border-radius: 50%;
            animation: floatParticle linear infinite;
            opacity: 0.3;
        }

        /* 神经树效果（简化版） */
        .neural-network {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            opacity: 0.2;
        }

        .node {
            position: absolute;
            width: 8px;
            height: 8px;
            background: var(--gold-accent);
            border-radius: 50%;
            animation: pulse 3s infinite;
        }

        .connection {
            position: absolute;
            background: rgba(212, 175, 55, 0.2);
            height: 2px;
            transform-origin: 0 0;
        }

        /* 响应式调整 */
        @media (max-width: 1200px) {
            .features-section {
                width: 90%;
                grid-template-columns: repeat(1, 1fr);
            }

            .tech-container {
                max-width: 90%;
            }
        }

        @media (max-width: 768px) {
            .hero-title {
                font-size: 60px;
            }

            .hero-subtitle {
                font-size: 24px;
            }

            .features-section {
                width: 90%;
                grid-template-columns: 1fr;
            }

            .feature-card {
                width: 90%;
                margin: 0 auto;
            }

            .tech-container {
                flex-wrap: wrap;
                gap: 20px;
            }

            .tech-item {
                width: 45%;
                margin-bottom: 25px;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="nav-bar flex items-center justify-between">
        <div class="flex items-center">
            <div>
                <iconify-icon class="logo-glow" icon="fa6-solid:feather-pointed" width="42" height="42" style="color: #d4af37"></iconify-icon>
            </div>
            <span class="pl-4 calligraphy-font" style="font-size: 24px;">五神鸟</span>
        </div>

        <nav class="hidden md:flex items-center">
            <a href="首頁.html" class="nav-link px-4">首页</a>
            <a href="神鳥傳説界面.html" class="nav-link px-4">神鸟传说</a>
            <a href="#" class="nav-link active px-4">科技互动</a>
            <a href="文化传承.html" class="nav-link px-4">文化传承</a>
            <a href="关于我们.html" class="nav-link px-4">关于我们</a>
        </nav>

        <div class="flex items-center">
            <!-- <iconify-icon icon="ci:search" style="font-size: 24px; color: white; margin-right: 20px;"></iconify-icon> -->
            <!-- <div class="lang-switch">EN/中文</div> -->
        </div>
    </header>

    <!-- 神鸟区域 -->
    <section class="hero-section">
        <!-- 背景粒子效果 -->
        <div class="particle-bg" id="particles"></div>
        
        <!-- 神经树效果 -->
        <div class="neural-network">
            <!-- 通过JS生成 -->
        </div>
        
        <!-- 渐变蒙版 -->
        <div style="position: absolute; width: 100%; height: 100%; top: 0; background: var(--dark-mask);"></div>
        
        <h1 class="hero-title calligraphy-font">科技赋能神韵</h1>
        <p class="hero-subtitle">穿越时空裂隙，化身远古先民，亲历神鸟降世的神迹时刻</p>
        <p class="hero-description">在VR幻境中驻足，于AI低语间感悟，随光影流转而共鸣。一场与五神鸟的神性对话，正透过科技，为你苏醒。</p>
    </section>

    <!-- 功能卡片区域 -->
    <section class="features-section">
        <!-- VR沉浸体验卡片 -->
        <div class="feature-card">
            <iconify-icon icon="ion:vr" class="feature-icon" style="font-size: 40px; color: var(--gold-accent);"></iconify-icon>
            <h3 class="feature-title calligraphy-font">神羽幻境</h3>
            <p class="feature-desc">通过VR幻境亲临五神合一的神圣现场，见证五方神力交汇绽放的震撼瞬间，感知它们共同的使命与无边的力量。</p>
            <button class="feature-btn" onclick="window.location.href='VR探索.html'">开启穿越</button>
        </div>

        <!-- AI交互解读卡片 -->
        <div class="feature-card">
            <iconify-icon icon="material-symbols:model-training-outline" class="feature-icon" style="font-size: 40px; color: var(--gold-accent);"></iconify-icon>
            <h3 class="feature-title calligraphy-font">灵语向导</h3>
            <p class="feature-desc">与AI神使对话，自主探寻神鸟的传说与秘密。随时发问，获得回应，在对话中解锁属于你的独特认知路径。</p>
            <button class="feature-btn" onclick="window.location.href='AI交互.html'">对话神使</button>
        </div>

        <!-- 光影艺术空间卡片 -->
        <div class="feature-card">
            <iconify-icon icon="ph:spotlight" class="feature-icon" style="font-size: 40px; color: var(--gold-accent);"></iconify-icon>
            <h3 class="feature-title calligraphy-font">光影圣殿</h3>
            <p class="feature-desc">置身光影交织的沉浸空间，通过流动的色彩与动态视觉，直观感受五神鸟截然不同的性格与神力特质。</p>
            <button class="feature-btn" onclick="window.location.href='光影之主.html'">踏入圣殿</button>
        </div>

        <!-- 数字藏品卡片 -->
        <div class="feature-card">
            <iconify-icon icon="ai:blockchain-color" class="feature-icon" style="font-size: 40px; color: var(--gold-accent);"></iconify-icon>
            <h3 class="feature-title calligraphy-font">永恒典阁</h3>
            <p class="feature-desc">不再限于收藏，更是深入认知。在这里，每一件数字神羽信物都关联详实的背景故事与文化脉络，助你全面读懂神鸟的世界。</p>
            <button class="feature-btn" onclick="window.location.href='数字神鸟珍藏馆.html'">步入典阁</button>
        </div>
    </section>

    <!-- 核心技术解析区域 -->
    <section class="tech-section">
        <h2 class="tech-section-title calligraphy-font">神力再现之秘</h2>
        <div class="tech-container">
            <!-- 实时光影引擎卡片 -->
            <div class="tech-card">
                <div class="tech-header">
                    <iconify-icon icon="entypo:light-up" class="tech-icon" style="font-size: 40px;"></iconify-icon>
                    <h3 class="tech-title">实时光影引擎</h3>
                </div>
                <div class="tech-image" style="background-image: url('https://images.unsplash.com/photo-1604871000636-074fa5117945?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1074&amp;q=80');"></div>
                <p class="tech-desc">实时计算光线行为，精确生成神鸟模型的高光、反射与柔和阴影，增强视觉沉浸感和真实感。</p>
            </div>
            
            <!-- 粒子特效系统卡片 -->
            <div class="tech-card">
                <div class="tech-header">
                    <iconify-icon icon="mdi:particle" class="tech-icon" style="font-size: 40px;"></iconify-icon>
                    <h3 class="tech-title">粒子特效系统</h3>
                </div>
                <div class="tech-image" style="background-image: url('https://images.unsplash.com/photo-1527409335569-f0e5c91fa707?ixlib=rb-4.0.3&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1170&amp;q=80');"></div>
                <p class="tech-desc">通过控制大量数字粒子，创造神鸟的魔法光效、云雾拖尾等视觉特效，让动作充满灵动与奇幻冲击。</p>
            </div>
        </div>
    </section>

    <!-- 页脚区域 -->
    <footer class="footer">
        <div class="flex flex-col md:flex-row justify-between items-center h-full">
            <div>
                <div class="flex items-center">
                    <div>
                        <iconify-icon class="logo-glow" icon="fa6-solid:feather-pointed" width="42" height="42" style="color: #d4af37"></iconify-icon>
                    </div>
                    <p class="copyright pl-4">©2025五神鸟文化科技平台</p>
                </div>
            </div>
            
            <div class="footer-nav my-4 md:my-0">
                <a href="关于我们.html">关于我们</a>
                <a href="关于我们.html">联系我们</a>
                <a href="#">隐私政策</a>
                <a href="#">使用条款</a>
            </div>
            
            <div class="flex">
                <a href="https://mp.weixin.qq.com/s/Gd91N-0lKqXblMExLEWIxw">
                <iconify-icon icon="ri:wechat-fill" class="social-icon"></iconify-icon>
                </a>
                <iconify-icon icon="ri:weibo-fill" class="social-icon"></iconify-icon>
                <iconify-icon icon="ic:baseline-tiktok" class="social-icon"></iconify-icon>
                <iconify-icon icon="ri:xiaohongshu-fill" class="social-icon"></iconify-icon>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 粒子背景生成
        document.addEventListener('DOMContentLoaded', function() {
            const particleContainer = document.getElementById('particles');
            const particleCount = 100;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.classList.add('particle');
                
                const size = Math.random() * 3 + 1;
                const posX = Math.random() * 100;
                const posY = Math.random() * 100;
                const animationDuration = Math.random() * 10 + 5;
                const animationDelay = Math.random() * 5;
                
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                particle.style.left = `${posX}%`;
                particle.style.top = `${posY}%`;
                particle.style.opacity = Math.random() * 0.5 + 0.1;
                particle.style.animation = `floatParticle ${animationDuration}s linear infinite ${animationDelay}s`;
                particle.style.backgroundColor = Math.random() > 0.5 ? '#d4af37' : '#66aaff';
                
                particleContainer.appendChild(particle);
            }

            // 创建神经树效果
            const neuralNetwork = document.querySelector('.neural-network');
            
            // 创建节点和连接
            const nodes = 20;
            const originPoints = [];
            
            for (let i = 0; i < nodes; i++) {
                const node = document.createElement('div');
                node.classList.add('node');
                
                // 围绕中心布局节点
                const angle = (i / nodes) * Math.PI * 2;
                const distance = 30 + Math.random() * 30;
                const dx = 50 + Math.cos(angle) * distance;
                const dy = 50 + Math.sin(angle) * distance;
                
                node.style.left = `${dx}%`;
                node.style.top = `${dy}%`;
                neuralNetwork.appendChild(node);
                originPoints.push({x: dx, y: dy});
                
                // 创建中心连接的线条
                const center = document.createElement('div');
                center.classList.add('connection');
                const length = Math.sqrt(Math.pow(dx - 50, 2) + Math.pow(dy - 50, 2));
                const rotation = Math.atan2(dy - 50, dx - 50) * 180 / Math.PI;
                
                center.style.width = `${length}%`;
                center.style.transform = `translate(50%, 50%) rotate(${rotation}deg)`;
                center.style.transformOrigin = '0 0';
                neuralNetwork.appendChild(center);
            }
            
            // 动画定义
            document.styleSheets[0].insertRule(
                `@keyframes floatParticle { 
                    0% { transform: translateY(0) translateX(0); } 
                    100% { transform: translateY(-100px) translateX(10px); } 
                }`
            );
        });
    </script>

</body></html>